<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // async 函数可以将异步操作变为同步操作
        // async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数
        function print() {
            // setTimeout 是异步操作
            // 异步操作不会阻塞后面的代码
            setTimeout(() => {
                console.log('定时器');
            }, 10);
            console.log("hello");
        }

        print();

        /*
                // 不使用 async/await，传统的 Promise 方式
                function fetchData() {
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve("数据加载完成！");
                        }, 2000);
                    });
                }
        
                // 使用 then/catch 处理 Promise
                fetchData()
                    .then(result => {
                        console.log(result);  // 打印 "数据加载完成！"
                    })
                    .catch(error => {
                        console.log(error);
                    });
        */

        // 使用 async/await
        async function fetchData() {
            let result = await new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("async 数据加载完成！");
                }, 2000);
            });
            console.log(result);  // 打印 "数据加载完成！"
        }

        // 调用 async 函数
        fetchData();

        console.log("主程序在这里结束");

    </script>
</body>

</html>